<template>
  <a-modal
    centered
    :width="720"
    :title="modifyEntity.title"
    :visible="modifyEntity.showModify"
    @cancel="handleRefresh"
  >
    <!--保存按钮-->
    <template slot="footer">
      <a-row>
        <a-col :span="8">
          <a-tag color="blue"> 操作完是否继续？</a-tag>
          <a-switch v-model="hasClose" :loading="loading">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </a-col>
        <a-col :span="8" :offset="8">
          <a-button @click="handleRefresh" v-if="readOnly">取消</a-button>
          <a-button
            icon="reload"
            v-if="!readOnly"
            @click="handleReset"
            :loading="loading"
            >重置</a-button
          >
          <a-divider type="vertical" v-if="!readOnly" />
          <a-button
            icon="check-circle"
            v-if="!readOnly"
            :loading="loading"
            @click="handleSubmit"
            >保存</a-button
          >
        </a-col>
      </a-row>
    </template>

    <a-spin :spinning="spinning">
      <a-form :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item
              label="组织维度"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                style="width: 100%"
                :disabled="readOnly"
                @change="orgDimChange"
                v-decorator="[
                  'sysOrganizeDimensionId',
                  { rules: [{ required: true, message: '请选择组织维度' }] },
                ]"
                placeholder="请选择组织维度"
              >
                <a-select-option
                  v-for="item in orgDims"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="上级组织"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tree-select
                tree-data-simple-mode
                tree-default-expand-all
                placeholder="请选择上级组织"
                @change="parentOrgChange"
                v-decorator="['parentId']"
                :disabled="readOnly"
                :treeData="orgParents"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-item
              label="名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="readOnly"
                v-decorator="[
                  'name',
                  { rules: [{ required: true, message: '请输入名称' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="简称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="readOnly"
                v-decorator="[
                  'abbreviationName',
                  { rules: [{ required: true, message: '请输入简称' }] },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-item
              label="编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                :disabled="readOnly"
                v-decorator="[
                  'code',
                  { rules: [{ required: true, message: '请输入编码' }] },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="负责人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                style="width: 100%"
                :disabled="readOnly"
                v-decorator="['adminId']"
                placeholder="请选择负责人"
              >
                <a-select-option
                  v-for="item in adminUsers"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item
          label="办公地址"
          :labelCol="{ xs: { span: 24 }, sm: { span: 4 } }"
          :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
        >
          <a-input
            :disabled="readOnly"
            v-decorator="[
              'officeAddress',
              { rules: [{ required: true, message: '请输入办公地址' }] },
            ]"
          />
        </a-form-item>

        <a-row>
          <a-col :span="12">
            <a-form-item
              label="职能描述"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-textarea
                :disabled="readOnly"
                v-decorator="['desc']"
                placeholder="请输入职能描述"
                :rows="4"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="描述"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-textarea
                :disabled="readOnly"
                v-decorator="['description']"
                placeholder="请输入描述"
                :rows="4"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item
              label="状态"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'status',
                  { valuePropName: 'checked', initialValue: true },
                ]"
                un-checked-children="冻结"
                checked-children="正常"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="是否删除"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              required
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'deleteFlag',
                  { valuePropName: 'checked', initialValue: false },
                ]"
                un-checked-children="否"
                checked-children="是"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-if="this.readOnly">
          <a-col :span="12">
            <a-form-item
              label="创建时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createTime']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="创建人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createUser']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="this.readOnly">
          <a-col :span="12">
            <a-form-item
              label="修改时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateTime']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="修改人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateUser']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { queryOrgDimSelect } from "@/api/sys/identity/orgDim";
import { queryAdminUserSelect } from "@/api/sys/identity/adminUser";
import {
  queryOrgTreeSelect,
  getOrg,
  addOrg,
  updateOrg,
} from "@/api/sys/identity/org";
export default {
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面标题
          title: "新增组织部门",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showModify: false,
        };
      },
    },
  },
  data() {
    return {
      labelCol: { xs: { span: 24 }, sm: { span: 8 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 14 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 只读状态
      readOnly: false,
      form: this.$form.createForm(this),
      entity: {},
      // 组织维度
      orgDims: [],
      // 父级组织部门
      orgParents: [],
      // 负责人
      adminUsers: [],
    };
  },
  created() {},
  mounted() {
    this.loadData();
    queryAdminUserSelect([1,2]).then((res) => {
      this.adminUsers = res.data;
    });
    queryOrgDimSelect().then((res) => {
      this.orgDims = res.data;
    });
  },
  methods: {
    //#region 加载下拉数据
    orgDimChange(val) {
      if (val) {
        this.orgParents = [];
        queryOrgTreeSelect({ orgDimId: val }).then((res) => {
          this.orgParents = res.data;
        });
      }
    },
    parentOrgChange(val) {
      if (val) {
        this.form.setFieldsValue({ parentId: val });
      }
    },
    //#endregion

    //#region 加载数据
    loadData() {
      this.readOnly =
        this.modifyEntity.operation === this.operationFlag.Detail
          ? true
          : false;
      this.form.resetFields(); // 重置参数值
      //修改，详情获取详细信息
      if (this.modifyEntity.operation !== this.operationFlag.Add) {
        let that = this;
        this.spinning = true;
        getOrg(this.modifyEntity.id )
          .then((res) => {
            that.entity = res.data;
            var setData = {};
            Object.keys(that.form.getFieldsValue()).forEach((item) => {
              setData[item] = that.entity[item];
            });
            that.form.setFieldsValue(setData);
            if (setData.sysOrganizeDimensionId) {
              that.orgDimChange(setData.sysOrganizeDimensionId);
            }
            that.spinning = false;
          })
          .catch((error) => {
            that.spinning = false;
          });
      }
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this;
      this.spinning = true;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (that.modifyEntity.operation === that.operationFlag.Add) {
            addOrg(values).then((res) => {
              that.submitResult(res);
            });
          } else {
            that.entity = Object.assign(
              that.entity,
              that.form.getFieldsValue()
            );
            updateOrg(that.entity).then((res) => {
              that.submitResult(res);
            });
          }
        } else {
          this.spinning = false;
        }
      });
    },
    // 保存结果
    submitResult(res) {
      if (res.code==200) {
        this.$notification.success({ description: res.msg });
        if (!this.hasClose) {
          this.$emit("handleRefresh");
        }
      } else {
        this.$notification.error({ description: res.msg });
      }
      this.spinning = false;
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false;
      this.$emit("handleRefresh");
    },
    // 重置
    handleReset() {
      this.loadData();
    },
    //#endregion
  },
};
</script>
